<template>
	<view @touchmove.stop.prevent="()=>{}">
		<van-popup :show="showPrivacy" mode="center" round="10" :safeAreaInsetBottom="false">
			<view class="privacy-box">
				<view class="title">用户隐私保护协议</view>
				<view class="desc">
					感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意
					<text class="privacy-desc" @click="openPrivacy">《用户隐私保护指引》</text>。
					当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。
				</view>
				<view class="btn-box">
					<button @click="close">拒绝</button>
					<button style="background-color: royalblue;color: #fff;" id="agree-btn"
						open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPrivacy: false,
				resolvePrivacyAuthorization: ''
			}
		},
		created() {
			wx.onNeedPrivacyAuthorization(resolve => {
				// 需要用户同意隐私授权时
				// 弹出开发者自定义的隐私授权弹窗
				this.showPrivacy = true
				this.resolvePrivacyAuthorization = resolve
			})
			wx.requirePrivacyAuthorize({
				success: () => {
					// 用户同意授权
					// 继续小程序逻辑
					console.log("success");
				},
				fail: () => {
					console.log("fail");
				}, // 用户拒绝授权
				complete: () => {
					console.log("complete");
				}
			})
			console.log(this.showPrivacy);
		},
		methods: {
			handleAgreePrivacyAuthorization() {
				// 用户点击同意按钮后
				this.showPrivacy = false
				this.resolvePrivacyAuthorization({
					buttonId: 'agree-btn',
					event: 'agree'
				})
			},
			openPrivacy() {
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
				})
			},
			close() {
				this.showPrivacy = false
				this.$emit("close")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.privacy-box {
		width: 70vw;
		padding: 20rpx 40rpx 40rpx;
		box-sizing: border-box;
	}

	.title {
		text-align: center;
		margin-top: 20rpx;
		font-weight: 700;
	}

	.desc {
		text-indent: 2em;
		margin-top: 20rpx;
	}

	.privacy-desc {
		color: #FD6D1C;
	}

	.btn-box {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}
</style>